<template>
	<view>
		<view class="" style="height: 100rpx;background-color: #fff;"></view>
		<view class="Header">
			<image class="title" src="@/static/pic/orderList.png" mode="widthFix"></image>
			<view class="searchBox">
				<u-search class="search" :showAction="false" shape="round" v-model="keyword"></u-search>
			</view>
		</view>
		<view class="tabBox">
			<u-tabs class="tabs" lineHeight="6rpx" :list="list" @change="click" :scrollable="false" lineColor="#0094E9"
				:current="current" :activeStyle="{
			    color: '#262626'}" :inactiveStyle="{
			    color: '#6B6B6B'}"></u-tabs>
		</view>
		<view class="swiperBox">
			<swiper class="swiper" :circular="false" :duration="300" v-if="mood.length>0">
				<!-- 全部 -->
				<swiper-item class="swiperItem">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="ReachBottom">
						<view class="orderList" v-for="(item,i) in mood" @click="toDate(item)">
							<view class="orderItem">
								<view class="orderHeader">
									<view class="left">
										<view class="titleBox">
											<image class="beforeIcon" src="@/static/pic/blueBox.png" mode="widthFix">
											</image>
											<view class="title">
												{{item.ownerName}}
											</view>
										</view>
										<view class="orderTime">
											接单时间：{{item.createTime}}
										</view>
									</view>
									<view class="right">
										<view class="price">
											<span class="priceIcon">¥</span>
											{{item.parkingAmount+item.tipAmount+item.tollAmount+
													item.totalAmount+item.waitingAmount+item.handlingAmount
													}}
										</view>
									</view>
								</view>
								<view class="addressBox">
									<view class="addressList">
										<view
											:class="k==0||k==item.waybillAddresses.length-1 ? 'addressItem':'addressItem1'"
											v-for="(meth,k) in item.waybillAddresses"
											:style="k!=item.waybillAddresses.length-1 & k!=0 & item.addressShow ? 'margin-bottom: 44rpx;':''">
											<view class="stepIconBox" v-if="k==0">
												<view class="stepIcon stepIconActive"></view>
											</view>
											<view class="stepIconBox1" v-else-if="k==item.waybillAddresses.length-1">
												<view class="stepIcon stepIconActive"></view>
											</view>
											<view class="stepIconBox1"
												v-else-if="k!=item.waybillAddresses.length-1 & k!=0 & item.addressShow">
												<view class="stepIcon stepIconActive"></view>
											</view>
											<view class="address" v-if="k==0||k==item.waybillAddresses.length-1">
												{{meth.address}}
											</view>
											<view class="address"
												v-if="k!=item.waybillAddresses.length-1 & k!=0 &item.addressShow ">
												{{meth.address}}
											</view>
											<view class="zheDieBtn"
												@click.stop.passive="item.addressShow=!item.addressShow"
												v-if="item.waybillAddresses.length>2">
												{{item.waybillAddresses.length*1-2}}个折叠
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>


						<!-- 请求完毕后 订单数据为空时 -->
						<!-- <view class="emptyBox" v-if="mood.length==0 && Loading">
							<image class="emptyIcon" src="@/static/pic/emptyOrder.png" mode="widthFix"></image>
							<view class="emptyText">
								暂无订单！
							</view>
						</view> -->
						<!-- 触底加载 -->
						<!-- <view class="loadmoreBox" v-if="mood.length!=0">
							<u-loadmore :status="status" :icon-type="iconType" />
						</view> -->
					</scroll-view>
				</swiper-item>
			</swiper>

			<view class="meiyous" v-else>
				<image src="@/static/meiyou.png" mode="aspectFill" style="width: 319rpx;height:230rpx;"></image>
				<view class="">暂无数据</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'

	export default {
		data() {
			return {
				items: ['进行中', '已完成', '已取消', '已驳回'],
				time: '',
				keyword: '',
				current: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				contentTopOffset: 98, //滑块区域距离顶部距离 默认98
				swiperHeight: 0, //滑块高度
				list: [{
					name: '进行中',
				}, {
					name: '待结算',
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				type: 0,
				page: 1,
				mood: [],
				timeShow: false,
				value1: Number(new Date()),
				minDate: Number(new Date() - 31536000000)
			}
		},
		created() {
			var date = new Date() // 获取时间
			var year = date.getFullYear() // 获取年
			var month = date.getMonth() + 1 // 获取月
			this.time = year + '年' + month + '月'
		},
		methods: {
			ReachBottom() {

			},
			//日期选择
			confirm(e) {
				//console.log(e)
				let date = new Date(e.value) // 获取时间
				let year = date.getFullYear() // 获取年
				let month = date.getMonth() + 1 // 获取月
				this.time = year + '年' + month + '月'
				this.timeShow = false
			},

			//订单列表操作
			toDate(e) {
				if (e.waybillNodeInfo.remark == '完成卸货' && e.waybillNodeInfo.addstate == 4) {
					uni.navigateTo({
						url: '/subPackages/order/querenTwo/querenTwo?id=' + e.waybillId
					})
				} else if (e.waybillNodeInfo.addstate == 5) {
					uni.navigateTo({
						url: '/subPackages/order/MyOrderDetails/MyOrderDetails?id=' + e.waybillId + '&type=' + this
							.type
					})
				} else {
					var remark = "";
					remark = e.waybillNodeInfo.remark
					if (remark == null || remark == '' || remark == '司机已接单') {
						uni.navigateTo({
							url: '/subPackages/order/orderDetail/orderDetail?id=' + e.waybillId
						})
					} else if (remark.indexOf("前往") > -1) {
						uni.navigateTo({
							url: '/subPackages/order/orderDetail/orderDetail?id=' + e.waybillId
						})
					}else{
						uni.navigateTo({
							url: '/subPackages/order/orderDetail/orderDetail?id=' + e.waybillId
						})
					}
				}
			},
			//标签切换
			click(item) {
				//console.log(item)
				this.current = item.index
				if (item.index == 0) {
					this.type = 0
				} else if (item.index == 1) {
					this.type = 11
				} else if (item.index == 2) {
					this.type = 12
				} else {
					this.type = 14
				}
				this.page = 1
				this.cread()
			},
			//内容切换
			// currentChange(e) {

			// 	this.goTop()
			// 	// 用户触摸滑动切换时,更新data中的current
			// 	this.current = e.detail.current
			// 	if (item.index == 0) {
			// 		this.type = 0
			// 	} else if (item.index == 1) {
			// 		this.type = 11
			// 	} else if(item.index == 2) {
			// 		this.type = 12
			// 	}else{
			// 		this.type = 14
			// 	}
			// 	this.cread()
			// 	//动态设置swiper的高度，使用nextTick延时设置
			// 	this.$nextTick(() => {
			// 		this.setSwiperHeight();
			// 	});

			// },
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			setSwiperHeight() {
				let element = "#content-wrap" + this.current;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect(data => {
					// //console.log("得到布局位置信息" + JSON.stringify(data));
					// //console.log("节点离页面顶部的距离为" + data.top);
				}).exec();


				query.exec((res) => {
					if (res && res[0]) {
						// 当滑块高度没有一屏高时,要保证滑块有一屏高
						//可以获取手机信息uni.getSystemInfo（）

						this.swiperHeight = res[0].height;
					}

				});

			},
			async cread() {
				let res = await this.$http.order.my_driver_order(this.type)
				this.mood = res.data.data
				this.mood.forEach((item, i) => {
					item.addressShow = false
				})
				this.mood = JSON.parse(JSON.stringify(this.mood))
			}
		},
		components: {
			Header
		},
		onLoad(args) {

		},
		onShow() {
			this.cread()
			//动态设置swiper的高度
			this.$nextTick(() => {
				this.setSwiperHeight();
			});
		}
	}
</script>

<style lang="scss" scoped>
	.meiyous {
		text-align: center;
		margin-top: 100rpx;
	}

	.Header {
		width: 100%;
		background-color: #fff;
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 30rpx;

		.title {
			width: 172rpx;
			height: 41rpx
		}

		.searchBox {
			width: 300rpx;

			.search {
				height: 66rpx;
			}
		}
	}

	.swiperBox {

		.swiper {
			width: 100%;

			padding: 25rpx 30rpx 30rpx 30rpx;
			flex: 1;
			box-sizing: border-box;
			background-color: #F3F3F3;

			height: calc(100vh - 208rpx);

			.swiperItem {
				overflow-y: scroll;

			}
		}
	}

	.orderList {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		.orderItem {
			width: 100%;
			box-sizing: border-box;
			padding: 43rpx 36rpx 32rpx 36rpx;

			.orderHeader {
				display: flex;
				justify-content: space-between;

				.left {
					.titleBox {
						display: flex;
						align-items: center;
						margin-bottom: 13rpx;

						.beforeIcon {
							height: 42rpx;
							width: 42rpx;
							margin-right: 12rpx;
						}

						.title {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #262626
						}
					}

					.orderTime {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #AFAFAF;
					}
				}

				.right {
					.price {
						font-size: 48rpx;
						font-family: DIN;
						font-weight: bold;
						color: #262626;
					}

					.priceIcon {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #262626;
					}
				}

			}
		}

		//地址步骤列表
		.addressBox {
			padding: 34rpx 0 27rpx;
			background-color: #F9F9F8;
			box-sizing: border-box;
			margin-top: 28rpx;
		}

		.addressList {
			width: 618rpx;
			padding: 0rpx 43rpx 0rpx 28rpx;
			box-sizing: border-box;
			background-color: #F9F9F8;
			overflow: hidden;
			position: relative;
			border-radius: 8rpx;




			.zheDieBtn {
				position: absolute;
				top: 50%;
				right: 43rpx;
				transform: translateY(-50%);
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #9F9F9F;
			}

			.addressItem {

				display: flex;
				align-items: center;
				margin-bottom: 44rpx;

				&:last-child {
					margin-bottom: 0rpx;
				}

				// 虚线
				&::after {
					content: ' ';
					width: 3rpx;
					position: absolute;
					border-right: 3rpx dashed #AFAFAF;
					height: 100%;
					left: 36rpx;
					top: 42rpx;
				}

				.address {
					width: 552rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #262626;
					margin-left: 21rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}

				.stepIconBox {
					height: 38rpx;
					display: flex;
					align-items: center;
					background-color: #F9F9F8;
					position: relative;
					z-index: 100;

					.stepIcon {
						width: 17rpx;
						height: 17rpx;
						border: 2px solid #979797;
						border-radius: 50%;
						background-color: #F9F9F8;

					}
				}

				.stepIconBox1 {
					height: 38rpx;
					display: flex;
					align-items: center;
					background-color: #F9F9F8;
					position: relative;
					z-index: 100;

					.stepIcon {
						width: 17rpx;
						height: 17rpx;
						border: 2px solid #0094E9;
						border-radius: 50%;
						background-color: #0094E9;
					}
				}

				.stepIconActive {
					background: #0094E9;
					border-color: #0094E9;
				}
			}

			.addressItem1 {
				display: flex;
				align-items: center;

				&:last-child {
					margin-bottom: 0rpx;
				}

				// 虚线
				&::after {
					content: ' ';
					width: 3rpx;
					position: absolute;
					border-right: 3rpx dashed #AFAFAF;
					height: 100%;
					left: 36rpx;
					top: 42rpx;
				}

				.address {
					width: 552rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #262626;
					margin-left: 21rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}

				.stepIconBox {
					height: 38rpx;
					display: flex;
					align-items: center;
					background-color: #F9F9F8;
					position: relative;
					z-index: 100;

					.stepIcon {
						width: 17rpx;
						height: 17rpx;
						border: 2px solid #979797;
						border-radius: 50%;
						background-color: #F9F9F8;

					}
				}

				.stepIconBox1 {
					height: 38rpx;
					display: flex;
					align-items: center;
					background-color: #F9F9F8;
					position: relative;
					z-index: 100;

					.stepIcon {
						width: 17rpx;
						height: 17rpx;
						border: 2px solid #0094E9;
						border-radius: 50%;
						background-color: #0094E9;
					}
				}

				.stepIconActive {
					background: #0094E9;
					border-color: #0094E9;
				}
			}
		}
	}
</style>